<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	  <div id="app">
	    <h1>{{title}}</h1>
      <box></box>
	  </div>
	</body>
	<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
  <template id="temp1">
    <div>
        <p>这是一个段落 - {{name}}</p>
    </div>
  </template>
  
  <template id="temp2">
    <div>
        <div>这是一个盒子1 - {{name}}</div>
    </div>
  </template>
  
  <template id="temp3">
    <div>
        <div>这是一个盒子2 - {{name}}</div>
        <c></c>
    </div>
  </template>
  
  <template id="temp4">
    <div>
        <div>这是一个容器 - {{name}}</div>
        <p1></p1>
        <p2></p2>
    </div>
  </template>
  
  <script type="text/javascript">
    
    // box
    //   parent1
    //   parent2
    //     child
    
    let child = {
      template:"#temp1",
      data(){
        return {
          name:"这是孙子"
        }
      }
    }
    
    let parent1 = {
      template:"#temp2",
      data(){
        return {
          name:"这是盒子1"
        }
      }
    }
    
    let parent2 = {
      template:"#temp3",
      data(){
        return {
          name:"这是盒子2"
        }
      },
      components:{
        c:child
      }
    }
    
    let box = {
      template:"#temp4",
      data(){
        return {
          name:"这是容器"
        }
      },
      components:{
        p1:parent1,
        p2:parent2
      }
    }
    
    
    
    var vm = new Vue({
      el:"#app",
      data:{
        title:"hello vue"
      },
      components:{
        box:box
      }
    })
    
  </script>
</html>
